<template>
    <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="formLabelAlign"
            style="max-width: 460px"
    >
        <el-form-item label="用户id" style="display: none">
            <el-input v-model="list.userId" />
        </el-form-item>

        <el-form-item label="姓名">
            <el-input v-model="list.username" />
        </el-form-item>

        <el-form-item label="头像">
            <el-upload
                    v-model:file-list="fileList"
                    action="http://localhost:39081/v1/upload"
                    name="file"
                    limit="1"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
            >
                <el-icon>
                    <Plus/>
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image"/>
            </el-dialog>
        </el-form-item>

        <el-form-item label="邮箱">
            <el-input v-model="list.email" />
        </el-form-item>

        <el-form-item label="性别">
            <el-input v-model="list.gender" />
        </el-form-item>

        <el-form-item label="年龄">
            <el-input v-model="list.age" />
        </el-form-item>

        <el-form-item label="手机号">
            <el-input v-model="list.phoneNumber" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="add()">提交</el-button>
        </el-form-item>

    </el-form>
</template>

<script setup>
    import { reactive, ref } from 'vue'
    import { FormProps } from 'element-plus'
    import axios from "axios";
    import qs from "qs";
    const fileList = ref([]);
    const dialogImageUrl = ref('');
    const dialogVisible = ref(false);

    const handleRemove = (uploadFile, uploadFiles) => {
        list.value.userUrl=null;
        console.log(uploadFile, uploadFiles)
        //服务器发出删除文件的请求
        //得到图片路径 (服务器删除图片需要路径) uploadFile.response= JsonResult
        console.log(uploadFile.response.data);
        let url = uploadFile.response.data;
        axios.post(BASE_URL+'/v1/remove?url=' + url)
            .then((response) => {
                if (response.data.code == 1) {
                    console.log("服务器图片删除完成!");
                }
            })
    }
    const handlePictureCardPreview = (uploadFile) => {
        dialogImageUrl.value = uploadFile.url
        dialogVisible.value = true
    }
    const handleSuccess = (response,uploadFile,uploadFiles)=>{
        // response=uploadFile.response=JsonResult
        list.value.userUrl = response.data; //把上传成功的图片路径给到user对象
        console.log(list.value.userUrl);
    }

    const list = ref({
        userId:'',
        username:'',
        userUrl:'a',
        email:'',
        gender:'',
        age:'',
        phoneNumber:''
    })
    const add=()=>{
        let user=localStorage.user?JSON.parse(localStorage.user):null;
        let Authorization=localStorage.user?JSON.parse(localStorage.Authorization):null;
        list.value.userId=user;
        let data=qs.stringify(list.value);
        axios.post("http://localhost:39081/users/addRecruiter",data,{
            headers:{
                Authorization
            }
        })
            .then((response)=>{
                if(response.data.state==40100){
                    alert("未登录");
                }
                if(response.data.state==20000){
                    location.href="/";
                }else {
                    alert("添加错误");
                }
            })
    }



</script>

<style scoped>

</style>